<template>
  <div class="mobile-pie-chart">
    <div class="line-chart">
      <chart :options="option"></chart>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: ['xAxisData', 'seriesData'],
    data () {
      return {
        option: {
          xAxis: {
              type: 'category',
              data: this.xAxisData
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: this.seriesData,
              type: 'line'
          }]
        }
      }
    },
    watch: {
     xAxisData (val, oldVal) {
        if (val !== oldVal) {
          this.option.xAxis.data = val
        }
      },
      seriesData (val, oldVal) {
        if (val !== oldVal) {
          this.option.series[0].data = val
        }
      }
    },
    methods: {},
    created () {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
.mobile-pie-chart
  .line-chart
    height 400px
    & > div, .echarts, canvas
      width 100% !important
      height 100% !important
</style>
